<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <script src="lib/jquery-1.9.0.min.js"></script>
  <script>
     // increment the target Temp
     function incTarget(room, amount) {
       var field = $('#_t_'+room);
       field.val(  Math.round(parseFloat(field.val())*10 + amount)/10 );
       $.ajax({
           url: "index.html?room="+room+"&target="+field.val(),
           cache: false
         }).done(function( html ) {});
     }
    // read the inital temperatures
    $.getJSON( "current.json", function( json ) {
        $('#outsideTemp').html(json['weather' ]);
        $('#timezone'   ).html(json['timezone']);
        var lastServer = "";
      
        for (var i=0;i<json['rooms'].length;i++) {
          var room   = json['rooms'][i];
          var key    = room['id'];
          var server = room['server'];
          if (server!=lastServer) {
             $('#result tr:last').after("<tr><td colspan=3 class=servertitle><div id="+server+">"+server+"</div></td></tr>");
             $('#'+server).click(lastServer=server, function(ev) {  $( "."+ev.data ).toggle(); });
          }
          // build inputRow
          var row = "<tr class="+server+"><td colspan=3><b>"+room['descr']+"</b></td></tr>"
                + "<tr class="+server+"><td width=40%>"+room['current']+" &#176;C</td>";
          if (room['state']==-1) // no gpio to control
            row = row + "<td colspan=2>";
          else { 
            row = row + "<td width=70%><button onclick=\"incTarget('"+key+"',-1)\">-</button> <input size=4 id=_t_"+key+" value=\""+room['target']+"\"/> <button onclick=\"incTarget('"+key+"',1)\">+</button></td><td width=10%>";
            if (room['state']==1)
             row = row + "<b style='color:red'>An</b>";
            else
             row = row + "Aus";
          }
          row = row + "</td></tr>";
          $('#result tr:last').after(row);
        }
     });
  </script>

  <style>
     body { font-family:Arial,Verdana,Helvetica,sans-serif; margin:0; color:#000; font-size:12px; padding:10px}
     td   { font-family:Arial,Verdana,Helvetica,sans-serif; margin:0; color:#000; padding:10px}
     .servertitle { font-weight:bold; border-top-width:1px; border-top-style:solid; border-top-color:black;background-color:#dddddd }
  </style>
  
</head>
<body>
<table border=0 width=100% id="result">
  <tbody>
     <tr style='background-color:#bbbbbb'><td id="timezone"></td><td>Au&szlig;entemp.:</td><td id="outsideTemp"></td></tr>
  </tbody>
</table>
</body>
</html>
